<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <!-- element ui -->
  <link rel="stylesheet" href="/static/css/element-ui.css">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="/static/js/vue.js"></script>
  <script src="/static/js/element-ui.js"></script>
  <script src="/static/js/httpVueLoader.js"></script>
  <title>Title</title>
</head>
<body>
<!-- header导航栏部分 -->
<div th:fragment="header" v-cloak>
  <header id="header" data-spy="affix" data-offset-top="70">
    <nav class="navbar-inverse" id="daohang">
      <div class="daohang">
        <div class="navbar-header clearfix">
          <button type="button" class="zd" id="zd">
            <span class="glyphicon glyphicon-align-justify"></span>
          </button>
          <a href="/index" class="navbar-brand"><img src="/static/img/logo.png" alt="LOGO"></a>
        </div>
        <div class="collapse navbar-collapse" id="daohangtiao">
          <ul class="nav navbar-nav">
            <li><a href="/home/home">文章首页</a></li>
            <li><a href="/story/story">故事</a></li>
            <li><a href="/archive/archive">档案</a></li>
            <li><a href="/timeline/timeLine">创作历程</a></li>
            <li><a href="/classify/classify">专栏</a></li>
            <li><a href="/message/message">留言</a></li>
            <li><a href="/aboutme/aboutMe">关于我</a></li>
            <li><a href="/friendlink/friendLink">友链</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</div>

<!-- 页脚部分 -->
<div th:fragment="footer" id="footer">
  <div class="f1">
    <div class="container">
      <div class="ff1 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="ff1-1">小袁博客 · Java开发</div>
        <div class="ff1-2">分享Java相关的知识和经验，以及各大框架的项目开发，提供Java学习的圈子</div>
        <div class="ff1-3">
          <p>电 子 邮 箱: 1971788445@qq.com</p>
          <div style="height: 20px"></div>
          <p>Q Q 交 流 群: 92545977</p>
        </div>
      </div>
      <div class="ff2 col-lg-8 col-md-8">
        <div class="col-lg-2 col-md-2">
          <div class="ff2-1">
            <p>博客介绍</p>
          </div>
          <p><a>博客简介</a></p>
          <p><a>建站教程</a></p>
          <p><a>更新日志</a></p>
          <p><a>博客</a></p>
          <p><a>免责声明</a></p>
        </div>
        <div class="col-lg-2 col-md-2">
          <div class="ff2-1">
            <p>技术支持</p>
          </div>
          <p><a>联系客服</a></p>
          <p><a>建站教程</a></p>
          <p><a>更新日志</a></p>
          <p><a>博客</a></p>
          <p><a>免责声明</a></p>
        </div>
        <div class="col-lg-2 col-md-2">
          <div class="ff2-1">
            <p>技术支持</p>
          </div>
          <p><a>联系客服</a></p>
          <p><a>建站教程</a></p>
          <p><a>更新日志</a></p>
          <p><a>博客</a></p>
          <p><a>免责声明</a></p>
        </div>
        <div class="col-lg-6 col-md-6" style="padding-right: 0;">
          <div class="col-lg-6 ff2-2">
            <div class="ff2-1">
              <p>打赏</p>
            </div>
            <img class="" src="/static/img/appreciate1.jpg" alt="打赏">
          </div>
          <div class="col-lg-6 ff2-2">
            <div class="ff2-1">
              <p>QQ交流群</p>
            </div>
            <img class="" src="/static/img/qq_group.jpg" alt="QQ交流群">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="f2">
    <p><a style="color: #cc6061;" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">桂ICP备2022000943号-2</a> @ 2022 <a style="color: #008c7e" href="https://www.xiaoyuan-boke.com">小袁博客</a></p>
  </div>
</div>
<!-- 页脚部分 -->

<!-- 右侧工具栏部分 -->
<div th:fragment="right-toolbar">
  <ul class="cbl">
    <li><a href="#">
      <div class="icon d2"><i class="i1"></i><span class="title">1971788445</span></div>
    </a></li>
    <i class="clearfix"></i>
    <li><a href="#">
      <div class="icon d2"><i class="i2"></i><span class="title">ydw2755</span></div>
    </a></li>
    <i class="clearfix"></i>
    <li><a href="https://blog.csdn.net/weixin_47971206" target="_blank">
      <div class="icon d2"><i class="i3"></i><span class="title">CSDN博客</span></div>
    </a></li>
    <i class="clearfix"></i>
    <li><a href="https://space.bilibili.com/1450477686" target="_blank">
      <div class="icon d2"><i class="i4"></i><span class="title">B站主页</span></div>
    </a></li>
    <i class="clearfix"></i>
  </ul>
</div>
<!-- 右侧工具栏部分 -->

<!-- 登录弹出框 -->
<div th:fragment="login-dialog">
  <!-- 登陆 -->
  <el-dialog title="登录" :visible.sync="loginFormVisible" width="30%" top="20vh">
    <el-form label-position="top" label-width="100px" :model="loginForm" :rules="loginRules" ref="loginForm">
      <!-- 用户名 -->
      <el-form-item label="账号" prop="account">
        <el-input prefix-icon="el-icon-user" placeholder="请填写账号" show-word-limit
                  v-model="loginForm.account" class="input-with-select" maxlength="25"
                  clearable>
        </el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input prefix-icon="el-icon-lock"
                  v-model="loginForm.password"
                  placeholder="请填写密码"
                  maxlength="20"
                  @keyup.native.enter="login('loginForm')"
                  show-password clearable></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="login('loginForm')">登 录<i class="xy-icon xyicon-login m-l-sm"></i></el-button>
    </div>
  </el-dialog>
</div>
<!-- 登录弹出框 -->
</body>
</html>